<template>
  <div class="complaint-add" v-loading="loading">
    <div class="title">
      投诉建议
    </div>
    <div class="title2">
      COMPLAINTS AND SUGGESTIONS
    </div>
    <e-container>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <div class="strategy-title1">为确保您能顺利提交投诉材料，请您在提起投诉前仔细阅读本须知：</div>
          <div class="strategy-title"> 一、本平台仅接受实名投诉，请按照平台提示填写真实信息。</div>
          <div class="strategy-title">二、请先注册再使用注册账号登录本平台。当使用注册账号登录时，可以在账号下看到您在平台的所有投诉内容。</div>
          <div class="strategy-title">三、应当遵守中华人民共和国法律法规，不得在本平台发表违反中华人民共和国宪法和法律的言论，实事求是，注意文明用语。</div>
          <div class="strategy-title">您一旦在本平台提起投诉，即表明您已阅读并理解认可了本须知的内容。</div>
          <!--          <span class="title">投诉建议</span>-->
        </div>
        <div class="form-database-form">
          <el-form :model="form" ref="formModel" label-width="130px" :rules="rule" status-icon validate-on-rule-change>
            <div class="form-row">
              <el-form-item label="姓名：" prop="name" required :rules="[{ required: true, message: '请填写姓名' }]">
                <el-input placeholder="请输入您的姓名" v-model="form.name" />
              </el-form-item>
              <el-form-item label="电话：" prop="telephone" required :rules="[{ required: true, message: '请填写联系电话' }]">
                <el-input placeholder="请输入您的联系电话" v-model="form.telephone" />
              </el-form-item>
              <el-form-item label="投诉人：" prop="username">
                <el-input v-model="form.username" readonly></el-input>
              </el-form-item>
            </div>
            <el-form-item label="内容：" prop="content" required :rules="[{ required: true, message: '请填写投诉内容!' }]">
              <el-input type="textarea" placeholder="请输入您的投诉内容" v-model="form.content"></el-input>
            </el-form-item>

            <div class="form-row1">
              <div class="upload1">
                <label for="picture">上传图片：</label>
              </div>
              <!-- <div class="upload1">
                <el-form-item label="上传图片：" prop="picture" required :rules="[{ required: true, message: '请上传图片' }]"></el-form-item>
              </div> -->
              <div class="upload">
                <el-upload action="#" list-type="picture-card" :on-preview="handlePreview" :on-remove="handleRemove"
                  :file-list="fileList" :before-upload="handleBeforeUpload" :limit="10" :multiple="true" show-file-list>
                  <i class="el-icon-plus"></i>
                </el-upload>
              </div>
              <el-dialog :visible.sync="dialogVisible">
                <img v-if="isImage" :src="dialogImageUrl" width="100%" alt="" />
              </el-dialog>
            </div>

            <el-form-item class="form-footer">
              <el-button type="primary" @click="submit">{{ btnText }}</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-card>
    </e-container>
  </div>
</template>

<style scoped lang="scss">
.strategy-title1 {
  padding-top: 1%;
  font-weight: 550;
  font-family: monospace;
  padding-left: 6%;
  padding-bottom: 1%;
  font-size: 17px;
  width: 100%;
}

.strategy-title {
  padding-left: 5%;
  font-weight: 550;
  font-family: monospace;
  padding-left: 6%;
  padding-bottom: 1%;
  font-size: 17px;
  width: 100%;
}

.title2 {
  padding-left: 5%;
  margin-bottom: 1%;
  color: #8c8c8c;
  text-align: center;
  font-size: 17px;
  width: 100%;
}

.complaint-add {
  padding-top: 20px;
  margin-bottom: 20px;

  .title {
    padding-left: 5%;
    text-align: center;
    font-size: 25px;
    width: 100%;
  }

  .box-card {
    border-radius: 15px;
    margin-bottom: 20px;
  }

  .form-database-form {
    padding-right: 5%;
    padding-top: 20px;
  }

  .form-row {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
  }

  .form-row1 {
    padding-left: 6%;
    display: flex;
    align-items: center;
    margin-bottom: 15px;
  }

  .upload {
    font-size: 18px;
    font-weight: bold;
    color: #606266;
    margin-right: 10px;
  }

  .el-input,
  .el-textarea__inner {
    font-size: 16px;
  }

  .el-input__inner {
    height: 40px;
  }

  .el-textarea__inner {
    min-height: 120px;
  }

  .el-button {
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 1px;
    border-radius: 8px;
    background-color: #d11c42;
    border-color: #d11c42;

    &:hover {
      background-color: #e30a37;
      border-color: #e30a37;
    }
  }


  .form-footer {
    text-align: right;
    margin-top: 20px;
  }
}

::v-deep .e-container {
  padding-bottom: 1%;
  padding-left: 5%;
  width: 1200px;
  margin: 0 auto;
}

.upload1 {
  text-align: right;
  vertical-align: middle;
  float: left;
  font-size: 15px;
  color: #606266;
  line-height: 40px;
  box-sizing: border-box;
  font-weight: 600;
}

::v-deep .el-form-item__label {
  text-align: right;
  vertical-align: middle;
  float: left;
  font-size: 15px;
  color: #606266;
  line-height: 40px;
  padding: 0 12px 0 0;
  box-sizing: border-box;
}
</style>

<script>
import api from '@/api'
import rule from '@/utils/rule'

export default {
  name: 'complaint-add',
  data() {
    return {
      rule,
      loading: false,
      form: {
        name: '',
        telephone: '',
        content: '',
        username: this.$store.state.user.session.username,
      },
      fileList: [],
      dialogImageUrl: '',
      dialogVisible: false,
      isImage: false,
      btnText: '提交投诉' // 添加了默认按钮文本
    }
  },
  methods: {
    handlePreview(file) {
      this.dialogImageUrl = file.url || file.preview;
      this.dialogVisible = true;
    },
    handleRemove(file, fileList) {
      this.fileList = fileList;
    },
    handleBeforeUpload(file) {
      const isImage = file.type.startsWith('image/');
      if (!isImage) {
        this.$message.error('上传文件只能是图片!');
        return false;
      }
      if (isImage) {
        this.isImage = true;
        const reader = new FileReader();
        reader.onload = (e) => {
          file.preview = e.target.result;
          this.fileList.push({
            name: file.name,
            url: file.preview,
            raw: file
          });
        };
        reader.readAsDataURL(file);
      }
      return false; // Prevent default upload behavior
    },
    submit() {
      console.log('loading状态:', this.loading);
      this.$refs.formModel.validate().then(() => {
        if (this.loading) return;
        this.loading = true;

        const formData = new FormData();
        Object.keys(this.form).forEach(key => {
          formData.append(key, this.form[key]);
        });
        this.fileList.forEach(file => {
          formData.append('files', file.raw);
        });

        this.$post(api.complaint.insert, formData).then(res => {
          console.log('请求成功:', res);
          this.loading = false;
          if (res.code === api.code.OK) {
            this.$message.success('添加成功');
            this.$emit('success', res.data);
            this.$refs.formModel.resetFields();
            this.fileList = [];
          } else {
            this.$message.error(res.msg);
          }
        }).catch(err => {
          console.log('请求失败:', err.message);
          this.loading = false;
          this.$message.error(err.message);
        });
      }).catch(err => {
        console.log(err.message);
      });
    },
  },
}
</script>
